<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            /* 
            6.开启box1的绝对定位，偏移量才起作用
            */
            position: absolute;
        }
    </style>
    <script>
        window.onload=function(){
            /* 
                使div可以跟随鼠标移动
            */
           //1.获取box1
           var box1=document.getElementById("box1");
           //2.绑定鼠标移动事件
           document.onmousemove=function(event){
            //3.解决兼容问题
            // event=event||window.event;

            /* 
                获取滚动条滚动的距离
                chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取

            */
           var st=document.body.scrollTop||document.documentElement.scrollTop;
           var sl=document.body.scrollLeft||document.documentElement.scrollLeft;
            //4.获取到鼠标的坐标
            /* 
            clientX和clientY
            用于获取鼠标在当前可见窗口的坐标
            div的偏移量，使相对于整个页面的 
             
            pageX和pageY可以获取鼠标相对于当前页面的坐标
            但是这两个属性在我们的IE8中不支持，所以如果需要兼容我们的IE8就不要使用
            */
            var left=event.clientX;
            var top=event.clientY;
            //5.设置div的偏移量
            box1.style.left=left+sl+"px";
            box1.style.top=top+st+"px";

           };
           var box2=document.getElementById("box2");
           box2.onmousemove=function(event){
               event=event||window.event;
               event.cancelBubble=true;

           }

        }
    </script>
</head>
<body style="width: 1000px; height: 1000px;">
    <div id="box2" style="width:500px;height:500px;background-color:#bfa;"></div>
    <div id="box1"></div>
</body>
</html>